<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>无标题文档</title>
  <link href="${pageContext.request.contextPath}/layui/css/layui.css"  media="all" rel="stylesheet" type="text/css" />
  <link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet" type="text/css" />
  <script type=javascript src="${pageContext.request.contextPath}/layui/jquery2.1.1.js" ></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/table.js" ></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/form.js" ></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/layer.js" ></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/laydate.js" ></script>
  <style>
    .layui-table-cell,.layui-table-box ,.layui-table-body{
      overflow: visible !important;
    }
    td .layui-form-select {
      margin-top: -10px;
      margin-left: -15px;
      margin-right: -15px;
    }
    td .input{
      width: 115px;
      height: 39px;
      margin-top: -9px;
      margin-left: -14px;
    }
    .layui-form-item i{
      display: block;
      margin-top: 10px;
    }
  </style>
</head>

<body>
<div class="place">
  <span>位置：</span>
  <ul class="placeul">
    <li>营销管理</li>
    <li>订购单管理</li>
    <li>订购单详情</li>
  </ul>
</div>

<form class="layui-form" lay-filter="detail">
  <div class="formtitle"><span>订购单信息</span></div>
  <div class="layui-form-item">
    <label class="layui-form-label">订单编号</label>
    <div class="layui-input-inline" >
      <input name="orderNum" id="orderNum" type="text"  readonly="readonly" class="layui-input" />
    </div>
    <div class="layui-input-inline" >
      <i>不能编辑</i>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">客户姓名</label>
    <div class="layui-input-inline" >
      <input name="name" id="name" type="text" class="layui-input" readonly/>
    </div>
    <div class="layui-input-inline" >
      <i>不能编辑</i>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">订购时间</label>
    <div class="layui-input-inline" >
      <input name="orderTime" id="orderTime" type="text" readonly="readonly" class="layui-input" />
    </div>
    <div class="layui-input-inline" >
      <i>不能编辑</i>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">联系电话</label>
    <div class="layui-input-inline" >
      <input name="tel" id="tel" type="text" readonly="readonly" class="layui-input" />
    </div>
    <div class="layui-input-inline" >
      <i>不能编辑</i>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">总金额</label>
    <div class="layui-input-inline" >
      <input name="totalAmount" id="totalAmount"  type="text" readonly="readonly" class="layui-input" />
    </div>
    <div class="layui-input-inline" >
      <i>不能编辑</i>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">操作人</label>
    <div class="layui-input-inline" >
      <input name="creater" id="creater"  type="text" readonly="readonly" class="layui-input" />
    </div>
    <div class="layui-input-inline" >
      <i>不能编辑</i>
    </div>
  </div>

  <table id="demo" lay-filter="demo"></table>

  <div class="layui-form-item">
    <label class="layui-form-label">审核意见</label>
    <div class="layui-input-inline" >
      <textarea id="opinion" name="opinion" class="layui-input" ></textarea>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">审核状态</label>
    <div class="layui-input-inline" >
      <select name="status" id="status" lay-verify="required" >
        <option value="">请选择</option>
        <option value="3">通过</option>
        <option value="4">不通过</option>
      </select>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button lay-submit class="layui-btn btn-check" lay-filter="check">审核</button>
    </div>
  </div>
</form>

<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
<script>
  layui.use(['table', 'form'], function () {
    var table = layui.table,
            form = layui.form,
            $ = layui.$;
    form.render();

    form.on('submit(check)', function (data) {//审核
      console.log(data.field)
      $.ajax({
        url: "/order/updateStatus",
        data: JSON.stringify(data.field),
        type: 'post',
        dataType: 'json',
        contentType:"application/json",
        success: function (resp) {
          layer.msg(resp.message, {icon: 6});
        },
        error: function () {
          layer.closeAll();
          layer.msg('系统错误，请联系管理员', {icon: 5});
        }
      });
      return false;
    });

    table.render({
      elem: '#demo'
      ,page: true //开启分页
      ,limits: [1, 2, 3, 4, 5]
      ,limit: 5   // 每页条数
      , url: '/orderDetail/getOrderDetailList?orderNum='+$("#orderNum").val() //数据接口
      , cols: [[ //表头
        {field: 'orderId', title: '序号', width: 120, align: "center"}
        , {field: 'brand', title: '品牌', width: 120,align: "center"}
        , {field: 'type', title: '类型', width: 120, align: "center"}
        , {field: 'model', title: '型号', width: 120, align: "center"}
        , {field: 'amount', title: '数量', width: 120, align: "center"}
        , {field: 'unit', title: '单位', width: 120, align: "center"}
        , {field: 'money', title: '单价', width: 120, align: "center"}
        , {field: 'totalAmount', title: '金额', width: 120, align: "center",
          templet:function(res){
            if(res.totalAmount != null){
              var money = "￥"+res.totalAmount;
              return money;
            }else{
              return '';
            }
          }}
      ]]
    });
    //头部工具栏事件
    table.on('toolbar(demo)', function (obj) {
      var checkStatus = table.checkStatus(obj.config.id)
              , data = checkStatus.data //获取选中的数据
              , demo = table.cache["demo"];//获取表格中的数据
      switch (obj.event) {
        case 'add':
          //添加时的字段信息
          var datas = {};
          //加入数组中
          demo.push(datas);
          //重载表格
          table.reload('demo', {
            data: demo
          });
          break;
        case 'del':
          if (data.length === 0) {
            layer.msg('请选中一行或多行数据');
          } else {
            var tablelist = [];//存储未选中的数据
            //循环表格数据
            for (var i in demo) {
              //判断未选中数据
              if (!demo[i].LAY_CHECKED) {
                //存入数组
                tablelist.push(demo[i]);
              }
            }
            //重载表格
            table.reload('demo', {
              data: tablelist
            });
          }
          break;
      }
    });
    //监听下拉框改变
    form.on('select(lczt)', function (data) {
      var selectElem = $(data.elem);
      var tdElem = selectElem.closest("td");
      var trElem = tdElem.closest("tr");
      var tableView = trElem.closest(".layui-table-view");
      table.cache[tableView.attr("lay-id")][trElem.data("index")][tdElem.data("field")] = data.value;
    });
  });
</script>
</body>
</html>
